<template>
  <div class="comment-list-container">
      <div style="text-align:center"><h6>---------------全部评论---------------</h6></div>
      <!-- 评论列表 -->
      <div class="comment-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell
             v-for="(item,index) in commentInfo.results"
             :key="index"
             >
             <template #icon>
                 <van-image
                 :src="item.aut_photo"
                 round
                 fit='cover'
                    />
             </template>
             <template #title>
                 <div class="authname-liking" @click="onLiking(item)"><span>{{item.aut_name}}</span><van-icon name="good-job" :badge="item.like_count" :class="{liked:item.is_liking}"></van-icon></div>
                 <div class="comment-content"><span>{{item.content}}</span></div>
                 <div class="pub-time"><span>{{item.pubdate | transfromRelativeTime}}</span>
                    <van-button type="default" size='mini' round>{{item.reply_count}}回复</van-button>
                    </div>
             </template>
            </van-cell>
            </van-list>
      </div>
  </div>
</template>

<script>
import { getEssayComment, likingComment, cancelLikingComment, addComment } from 'network/news'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'CommentList',
  props: {
    essayId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      finished: false,
      // 发送给后端的参数
      getCommentQuery: {
        type: 'a',
        source: this.essayId,
        offset: null,
        limit: 10
      },
      // 评论的相关信息
      commentInfo: {}
    }
  },
  created () {
    this.$bus.$on('on-post', (message) => {
      this.handlePost(message)
    })
  },
  methods: {
    ...mapMutations(['setCommentTotal']),
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data: res } = await getEssayComment(this.getCommentQuery)
      if (res.data.results.length < 10) {
        this.finished = true
      }
      this.commentInfo = res.data
      this.getCommentQuery.offset = this.commentInfo.last_id
      console.log(this.commentInfo.total_count)
      this.setCommentTotal({
        commentToal: this.commentInfo.total_count
      })
      this.loading = false
    },
    // 评论点赞,有点赞取消点赞,没点赞给点赞,点赞之前要判断用户有没有登录
    async onLiking (item) {
      if (!this.userState) {
        return this.$toast('您还没有登录呢o(╯□╰)o')
      }
      try {
        if (item.is_liking) {
          const res = await cancelLikingComment(item.com_id.toString())
          console.log(res)
          item.is_liking = false
          item.like_count--
          this.$toast.success('取消点赞成功♪(^∇^*)')
        } else {
          const res = await likingComment(item.com_id.toString())
          console.log(res)
          item.is_liking = true
          item.like_count++
          this.$toast.success('点赞成功(#^.^#)')
        }
      } catch (error) {
        this.$toast('哎哟ε=(´ο｀*)))服务器忙!或者您没网哟')
      }
    },
    // 发布评论
    async handlePost (message) {
      try {
        const { data: res } = await addComment({
          target: this.essayId,
          content: message
        })
        console.log('ss')
        console.log(res)
        this.commentInfo.results.unshift(res.data.new_obj)
        this.$toast.success('发布成功(＾Ｕ＾)ノ~ＹＯ')
      } catch (error) {
        this.$toast.fail('ε=(´ο｀*)))唉服务器有点忙')
      }
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style lang='less' scoped>
.comment-list-container{
    .comment-list{
        .van-image{
            width: 35px;
            height: 35px;
            margin-right: 14px;
        }
        .authname-liking{
            span{
                color:#406599;
            }
            .van-info {
                min-width: unset;
                font-weight: unset;
                line-height: unset;
                border: unset;
                background-color: pink;
            }
              font-size: 15px;
              display: flex;
              justify-content: space-between;
        }
        .van-cell{
            color: unset;
            font-size: unset;
        }
        .comment-content{
            margin-top: 7px;
            margin-bottom: 7px;
            span{
            color: 222222;
            font-size: 16px;
            }
        }
        .pub-time{
            color: #222222;
            font-size: 12px;
            display: flex;
            align-items: center;
            // span{
            //     margin-right: 13px;
            // }
            .van-button{
                margin-left: 13px;
            }
        }
        .liked{
            color: pink;
        }
    }
}
</style>
